<template>
<div>
    <h2 style="text-align: center;">用户登录列表页面</h2>
    <table border="1">
        <thead>
            <tr>
                <td>账号ID</td>
                <td>账号</td>
                <td>密码</td>
                <td>注册时间</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info" :key="item.U_Id">
                <td>{{ item.U_Id }}</td>
                <td>{{ item.UL_Name }}</td>
                <td>{{ item.UL_Pwd.substring(0,4) }}***</td>
                <td>{{ item.UL_Date.substring(0,10) }}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';

//创建响应式数据
const info=ref([{
    U_Id:"",
    UL_Name:"",
    UL_Pwd:"",
    UL_Date:""
}])

//创建生命周期钩子函数
onMounted(()=>{
    LoadData()
})

//完成数据加载
const LoadData=()=>{
    axios.get("https://localhost:44309/api/Users/ShowUserInfo")
    .then(res=>{
        info.value=res.data
    })
    .catch(error=>{
        console.log(error);
    });
}
</script>
